<template>
  <div>
  <songs-list :songs="songsRes"></songs-list>
  </div>
</template>

<script>
import { SearchThings } from '@/api/search.js'
import songsList from '../../components/SongsList/songsList.vue'
export default {
  components: { songsList },
  data () {
    return {
      searchInfo: {
        keywords: '',
        limit: 30,
        offset: 0,
        type: 1
      },
      songsRes: []
    }
  },
  props: ['keyword'],
  created () {
    this.searchInfo.keywords = this.keyword
    this.showSearch()
  },
  methods: {
    // 展示搜索结果
    async showSearch () {
      const res = await SearchThings(this.searchInfo)
      if (res.data.code !== 200) return this.$message.error('搜索失败')
      this.songsRes = res.data.result.songs
    }
  },
  watch: {
    // 搜索词发生变化就再搜
    keyword (val) {
      this.searchInfo.keywords = val
      this.showSearch()
    }
  }
}
</script>
